<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./mingdan.html"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .txl {
            float: left;
            margin-top: 100px;
            margin-left: 5px;
        }

        .txl ul h4 {
            height: 50px;
            width: 200px;
            text-align: center;
            line-height: 50px;
            background-color: rgb(255, 250, 232);
        }

        .txl ul:last-child h4 {
            border: none;
        }

        .txl ul {
            overflow: hidden;
            cursor: pointer;

        }

        .txl ul li {
            height: 0px;
            line-height: 34px;
            background-color: #FBF0D2;
            transition: all .7s ease 0s;
        }

        .txl ul li:hover {
            background-color: #605c506b;
        }

        .txlmain {
            position: absolute;
            top: 100px;
            left: 205px;
            width: 1000px;
            display: flex;
            flex-direction: column;
            cursor: pointer;
        }

        .txlmain ol li {
            float: left;
            border-bottom: 1px solid black;
            line-height: 80px;
            font-size: 20px;
            font-weight: 700;
            padding-left: 30px;

            background-image: linear-gradient(rgb(82, 232, 232), rgb(211, 125, 237));
        }

        .cx {
            position: absolute;
            left: 500px;
            top: 50px;
        }
    </style>
</head>
<!-- <form action="">
    <select id="zu"></select>
    <select id="xm"></select>
</form> -->

<body>
    <div class="cx">
        <input type="text">
        <button>查询</button>
    </div>

    <div class="txl">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
    <div class="txlmain">
    </div>
    <script>
        var data = [{
            name: "郭鹏杰",
            age: 20,
            sex: "男",
            phone: 15537580947,
            dis: "打豆豆",
            fenzu: "第一组"
        }, {
            name: "杨璐瑶",
            age: 20,
            sex: '女',
            phone: 15978844693,
            dis: '吃饭',
            fenzu: '第一组'
        }, {
            name: '李存财',
            age: 19,
            sex: '男',
            phone: 13193560276,
            dis: '爱好打游戏',
            fenzu: '第一组'
        }, {
            name: '顾乐',
            age: 21,
            sex: '男',
            phone: 17395882286,
            dis: '葡萄',
            fenzu: '第一组'
        }, {
            name: "靳开创",
            age: 18,
            sex: "男",
            phone: 13183116955,
            dis: "描述",
            fenzu: "第一组",
        }, {
            name: '刘奇',
            age: 21,
            sex: '男',
            phone: 13461750025,
            dis: '爱好游戏',
            fenzu: '第一组',
        }, {
            name: "张艺",
            age: 19,
            sex: "男",
            phone: 13271711173,
            dis: "Hello World",
            fenzu: "第二组",
        }, {
            name: "曾娜娜",
            age: 98,
            phone: 18605087224,
            dis: "芝士美女",
            fenzu: "第二组",
        }, {
            name: "付潇然",
            age: 249,
            phone: 18538112416,
            dis: "放风",
            fenzu: "第二组",
        }, {
            name: "余庭伟",
            age: 22,
            sex: "男",
            phone: 13903971541,
            dis: "一男的",
            fenzu: "第二组",
        }, {
            name: "李国政",
            age: 18,
            sex: "男",
            phone: 13253053446,
            dis: "你好!世界",
            fenzu: "第二组",
        }, {
            name: '李江涛',
            age: 21,
            sex: '男',
            phone: 1342341345,
            dis: '描述',
            fenzu: '第三组',
        }, {
            name: '王彬',
            age: 22,
            set: '男',
            phone: 18237839054,
            dis: '打游戏',
            fenzu: '第三组',
        }, {
            name: "张少鹏",
            age: 18,
            sex: "男",
            phone: 15138168315,
            dis: "看小说",
            fenzu: "第三组",
        }, {
            name: "ikun",
            age: 18,
            sex: "男",
            phone: 110,
            dis: "唱,跳,rap,篮球",
            fenzu: "第三组",
        }, {
            name: '邢首都',
            age: 21,
            sex: '男',
            phone: 1986539555,
            dis: '你猜',
            fenzu: '第三组'
        }, {
            name: '李陈',
            age: 23,
            sex: '男',
            phone: 17633723284,
            dis: '潜水',
            fenzu: '第三组',
        }, {
            name: '张赫',
            age: '18',
            sex: '男',
            phone: 15037090481,
            dis: '看宝宝巴士',
            fenzu: '第三组'
        }, {
            name: "李孟焱",
            age: 22,
            sex: "男",
            phone: 17530118820,
            dis: "学习、游戏",
            fenzu: "第三组",
        }, {
            name: '柳怀',
            age: 18,
            sex: '男',
            phone: 17534743578,
            dis: '唱跳,rap,篮球',
            fenzu: '第三组'
        }, {
            name: "张亚阳",
            age: 15,
            sex: "男",
            phone: 17837222136,
            dis: "搞笑男",
            fenzu: "第四组",
        }, {
            name: "张尚坤",
            age: 16,
            sex: "男",
            phone: 18538210158,
            dis: '搞笑男',
            fenzu: "第四组",
        }, {
            name: "苏丽敏",
            age: 18,
            sex: "女",
            phone: 18803600782,
            dis: '搞笑女',
            fenzu: "第四组",
        }, {
            name: '翟海迪',
            age: 22,
            sex: '女',
            phone: 17550517528,
            dis: '搞笑女',
            fenzu: '第四组'
        }, {
            name: '高鹏飞',
            age: 20,
            sex: '男',
            phone: 17633824126,
            dis: '搞笑男',
            fenzu: '第四组'
        }, {
            name: '张旭',
            age: 23,
            sex: '男',
            phone: 15518493219,
            dis: '佛系男',
            fenzu: '第四组'
        }, {
            name: '杨嘉楠',
            age: 22,
            sex: '男',
            phone: 13663949149,
            dis: '搞笑男',
            fenzu: '第四组',
        }, {
            name: '汤阳阳',
            age: '18',
            sex: '男',
            phone: '15537375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '付建朋',
            age: '18',
            sex: '男',
            phone: '16537375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '位恩喜',
            age: '18',
            sex: '男',
            phone: '18538375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '李建涛',
            age: '18',
            sex: '男',
            phone: '15557375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '张少龙',
            age: '18',
            sex: '男',
            phone: '17538375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '曲永沛',
            age: '18',
            sex: '男',
            phone: '18537375861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '谢遵杰',
            age: '18',
            sex: '男',
            phone: '16537875861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '廖治行',
            age: '18',
            sex: '男',
            phone: '13537975861',
            dis: '唱跳rap打篮球',
            fenzu: '第五组',
        }, {
            name: '刘文奇',
            age: 24,
            sex: '男',
            phone: 13949125089,
            dis: '唱跳rap篮球',
            fenzu: '第六组',
        }, {
            name: "刘奕赛",
            age: 20,
            sex: "男",
            phone: 17630586042,
            dis: "敲代码",
            fenzu: "第六组"
        }, {
            name: "李楠",
            age: 21,
            sex: "男",
            phone: 17638900426,
            dis: "唱,跳,rap,篮球",
            fenzu: "第六组",
        }, {
            name: "牛意博",
            age: 18,
            sex: "男",
            phone: 17539585630,
            dis: "球",
            fenzu: "第六组",
        }, {
            name: "张自宽",
            age: 21,
            sex: "男",
            phone: 17740229824,
            dis: "码农",
            fenzu: "第六组",
        }, {
            name: "张晓羽",
            age: 16,
            sex: "女",
            phone: 19836536157,
            dis: "无敌青春美少女",
            fenzu: "第六组"
        }, {
            name: "李根源",
            age: 20,
            sex: "男",
            phone: 15239999437,
            dis: "刀不锋利马太瘦，你拿什么跟我斗",
            fenzu: "第六组",
        }, {
            name: "尹裕钧",
            age: 22,
            sex: "男",
            phone: 15738111631,
            dis: "人生得意须尽欢，莫使金樽空对月",
            fenzu: "第六组",
        }, {
            name: "唐俊毫",
            age: 19,
            sex: "男",
            phone: 13223921165,
            dis: "秋风萧瑟，洪波涌起",
            fenzu: "第六组"
        }]
        function xuanran(i) {
            var txlmain = document.querySelector('.txlmain');
            txlmain.innerHTML += `<ol>
            <li>姓名：${data[i].name}</li>
            <li>年龄：${data[i].age}</li>
            <li>性别：${data[i].sex}</li>
            <li>手机号：${data[i].phone}</li>
            <li>描述：${data[i].dis}</li>
            <li>分组：${data[i].fenzu}</li>
        </ol>`;
        }
        var input = document.querySelector('input')
        var txlbox = document.querySelector('.txlbox')
        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            var txlmain = document.querySelector('.txlmain');
            txlmain.innerHTML = ''
            for (let i = 0; i < data.length; i++) {
                if (input.value == data[i].name) {
                    xuanran(i);
                    continue;
                } else if (input.value == data[i].age) {
                    xuanran(i);
                    continue;
                } else if (input.value == data[i].sex) {
                    xuanran(i);
                    continue;
                } else if (input.value == data[i].fenzu) {
                    xuanran(i);
                    continue;
                } else if (input.value == data[i].phone) {
                    xuanran(i);
                    continue;
                }
                // console.log(data[i].dis.length);
                // for(let j=0;j<data[i].dis.length;j++){
                //     if(data[i].dis[j].indexOf(input.value)!=-1){
                //         xuanran();
                //     }
                // }
                // else{
                //     txlmain.innerHTML = `<ol><li>查无此人</li></ol>`
                //     continue;
                // }
            }
        })
        var uls = document.querySelectorAll('ul')
        console.log(data);
        var str1 = ''
        var str2 = ''
        var str3 = ''
        var str4 = ''
        var str5 = ''
        var str6 = ''
        var str7 = ''
        for (let i = 0; i < data.length; i++) {
            if (data[i].fenzu == '第一组') {
                str1 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第二组') {
                str2 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第三组') {
                str3 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第四组') {
                str4 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第五组') {
                str5 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第六组') {
                str6 += `<li>${data[i].name}</li>`
            }
        }
        uls[0].innerHTML = '<h4>第一组</h4>' + str1
        uls[1].innerHTML = '<h4>第二组</h4>' + str2
        uls[2].innerHTML = '<h4>第三组</h4>' + str3
        uls[3].innerHTML = '<h4>第四组</h4>' + str4
        uls[4].innerHTML = '<h4>第五组</h4>' + str5
        uls[5].innerHTML = '<h4>第六组</h4>' + str6
        var h4s = document.querySelectorAll('h4');
        var ullis = document.querySelectorAll('ul>li');
        for (let i = 0; i < h4s.length; i++) {
            h4s[i].onclick = function () {
                var lis = uls[i].querySelectorAll('li')
                var num = lis.length;
                for (let k = 0; k < ullis.length; k++) { // 点击前清除所有li 的高度
                    ullis[k].style.height = '0px';
                }
                for (let j = 0; j < num; j++) {
                    lis[j].style.height = '34px';
                }
            }
        }
        for (let i = 0; i < ullis.length; i++) {
            ullis[i].onclick = function () {
                var txlmain = document.querySelector('.txlmain');
                txlmain.innerHTML =
                    `<ol>
            <li>姓名：${data[i].name}</li>
            <li>年龄：${data[i].age}</li>
            <li>性别：${data[i].sex}</li>
            <li>手机号：${data[i].phone}</li>
            <li>描述：${data[i].dis}</li>
            <li>分组：${data[i].fenzu}</li>
        </ol>`
            }
        }
    </script>
</body>

</html>